import React, { Component } from 'react'
import axios from 'axios'

class Home extends Component {

    state = {
        list: [],
        i: 0
    }

    componentDidMount() {
        axios.get("/api/list").then((res) => {
            this.setState({
                list: res.data
            })
        })
    }

    clickBtn(index) {
        this.setState({
            i: index
        })
    }

    render() { 
        let { list, i } = this.state
        console.log(list)
        return (
            <div>
                <ul>
                    {
                        list && list.length ? list.map((item,index) => {
                            return <li key={index} onClick={
                                this.clickBtn.bind(this,index)
                            }>{item.title}</li>
                        }) : ''
                    }
                </ul>
                <ol>
                    {
                        list && list.length ? list[i].children.map((item,index) => {
                            return (
                                <dl key={index}>
                                    <img src={item.img} alt='' />
                                    <span>{item.title}</span>
                                </dl>
                            )
                        }) : ''
                    }
                </ol>
            </div>
        )
    }
}
 
export default Home;